@import "./base";
.product-main
    display flex
    .product-main-l
        flex 1
        margin-right 16px
    .product-main-r
        width 284px

.product-name
    padding 18px 18px 0
    border color-border
    background-color #fff
    box-sizing border-box
    border color-border

.product-name-t
    height 20px
    line-height 20px
    display flex
    justify-content space-between

    p:nth-child(1)
        display flex
        
        span
            display block
            font-size size1
            color color1

        span:nth-child(2)
            margin-left 10px
            text-align center
            font-size size4
            color #fff
            width 46px
            height 20px
            background url(/public/sign.png) no-repeat center center

        span.signR
            background-image url(/public/sign-r.png)
        span.signY
            background-image url(/public/sign-y.png)
        span.signG
            background-image url(/public/sign-g.png)


    p:nth-child(2)
        font-size 14px

.product-name-b
    display flex
    height 50px
    justify-content space-between
    align-items center
    border-top color-border
    > div
        display flex
        line-height 14px
        > span, > a 
            font-size size5
            color color5

        > a
            display block
            margin-right 18px
            padding-left 20px
            background-repeat no-repeat
            background-position left center 

            &:nth-of-type(1)
                background-image url(/public/eyes.png)
            &:nth-of-type(2)
                background-image url(/public/comment.png)
            &:nth-of-type(3)
                background-image url(/public/car.png)
            &:nth-of-type(4)
                padding-left 0
                padding-right 20px
                background-image url(/public/down.png)
                background-position right center
        > span:nth-child(2)
            width 90px
            i 
                float left
                width 12px 
                height 14px 
                background url(/public/star.png) no-repeat center center
                margin-right 8px
    > a
        display block
        width 134px
        height 32px
        font-size 18px
        line-height 32px 
        color #fff
        background-color color-red
        text-align center
        &:hover,&:active
            background-color color-red-select

.product-name-c
    > section
        display: flex
        justify-content center
        padding-top 21px
        p:nth-child(1)
            width 280px
            height 14px
            border-radius 7px
            background-color #e5e5e5
            overflow hidden
            span
                display block
                height 14px
                background-color color-blue

        p:nth-child(2)
            margin-left 5px 
            height 14px
            line-height 14px
            font-size 12px
            color color1
    > p 
        margin-top 12px
        height 16px
        line-height 16px
        font-size size5
        color color5
        text-align center
    > nav
        padding 20px
        display flex
        justify-content center
        > a
            display block
            width 76px
            height 24px
            line-height 24px
            border 1px solid color-base
            color color-base
            border-radius 5px
            text-align center
            margin-right 12px
            &:last-child
                margin-right 0


.product-man
    border color-border
    padding 18px 0 30px
    background-color #fff
    cursor pointer 
.product-man-t
    height 14px
    font-size size5
    color color5
    line-height 14px
    text-align right
    padding-right 10px
    margin-bottom 18px
.product-man-c
    display flex
    align-items center
    > div:nth-child(1)
        flex 3
        border-right color-border
        img 
            display block
            margin 0 auto
            width 70px
            height 70px
    > div:nth-child(2)
        flex 2
        text-align center
        p:nth-child(1)
            height 18px
            font-size 18px
            line-height 18px
            color color-red
            margin-bottom 12px
        p:nth-child(2)
            height 14px
            line-height 14px
            font-size size2 
            color color2 
.product-man-b
    display flex
    align-items center
    margin-top 26px
    > div:nth-child(1)
        flex 3
        p 
            text-align center 
            height 16px 
            line-height 16px 
            color color3
            font-size size3
            &:nth-child(1)
                margin-bottom 10px
                color color2
                font-size size2
            span:nth-child(2)
                margin-left 14px
                color color5
                font-size size5
                color color-black
    > div:nth-child(2)
        flex 2

.product-detail,.product-aside,.product-aside2
    margin-top 16px
    background-color #fff
    border color-border

.product-aside
    > div
        display flex 
        > a
            flex 1
            display block
            height 119px
            padding-top 72px
            line-height size3
            text-align center
            color color3
            font-size size3
            background-position center 30px
            background-repeat no-repeat
            box-sizing border-box
            &:active,&:hover,&.active
                color color-blue
            
    > div:nth-child(1) > a:nth-child(1)
        background-image url('/public/pro_icon1.png')
        &:hover,&:active,&.active
            background-image url('/public/pro_icon1_ac.png')
    > div:nth-child(1) > a:nth-child(2)
        background-image url('/public/pro_icon2.png')
        &:hover,&:active,&.active
            background-image url('/public/pro_icon2_ac.png')
    > div:nth-child(1) > a:nth-child(3)
        background-image url('/public/pro_icon3.png')
        &:hover,&:active,&.active
            background-image url('/public/pro_icon3_ac.png')
    > div:nth-child(2) > a:nth-child(1)
        background-image url('/public/pro_icon4.png')
        &:hover,&:active,&.active
            background-image url('/public/pro_icon4_ac.png')
    > div:nth-child(2) > a:nth-child(2)
        background-image url('/public/pro_icon5.png')
        &:hover,&:active,&.active
            background-image url('/public/pro_icon5_ac.png')
    > div:nth-child(2) > a:nth-child(3)
        background-image url('/public/pro_icon6.png')
        &:hover,&:active,&.active
            background-image url('/public/pro_icon6_ac.png')

.product-aside2
    padding 18px
    &:empty
        display none
    li
        position relative
        text-align center
        font-size size3
        color color3
        line-height 30px 
        p 
            cursor pointer
            &:hover .close
                display block

        .close
            position absolute
            top 5px 
            right 5px
            display none
            width 20px
            height 20px
            background url('/public/close.png') no-repeat center center


.product-detail
    > h2 
        text-indent 18px
        border-bottom color-border
    > h3
        height 40px
        line-height 40px
        text-indent 40px
        color color3
        font-size size3
        background url('/public/pro_icon.png') no-repeat 18px center;

    > table
        width 822px
        border color-border
        border-right none
        border-bottom none
        margin 0 auto

        th 
            color color2
            font-size size2
            
            font-weight normal
        td 
            color color3
            font-size size3
        td,th
            width 25%
            border-right color-border
            border-bottom color-border
            text-align center
            padding 0
            height 40px 
            line-height 40px
        .ac
            background-color #e6effc
    
    > ul 
        margin 40px 18px 0
        overflow hidden
        li
            float left 
            width 50%
            margin-bottom 18px
            height 16px
            line-height 16px
            span
                float left
                &:nth-child(1)
                    width 45%
                    color color3
                    font-size size3
                    text-indent 22px 
                &:nth-child(2)
                    width 55%
                    color color2
                    font-size size2
                    text-align justify

    > ol
        margin 0 18px
        li
            line-height 24px
            margin-bottom 13px
            overflow hidden
            span
                float left
                &:nth-child(1)
                    width 22.5%
                    color color3
                    font-size size3
                    text-indent 22px 
                &:nth-child(2)
                    width 77.5%
                    color color2
                    font-size size2
                    text-align justify

    .mg18
        margin 18px 

.product-other
    background-color #fff
    margin-bottom 40px

.product-other-t
    position relative
    > a
        position absolute
        line-height 40px
        top 0
        right 12px
        font-size size3
        color color3

.product-other-c
    display flex
    > li 
        flex 1
        margin-right 14px
        border color-border
        cursor pointer
        &:last-child
            margin-right 0
        > h4
            height 40px 
            line-height 40px
            border-bottom color-border
            text-align center
            color color1
            font-size size1
            i
                display inline-block
                width 36px
                height 18px
                line-height 18px
                font-size size5
                vertical-align middle
                text-align center
                background url('/public/sign.png') no-repeat center center
                color #fff
                margin-left 10px 

.product-other-box
    display flex
    justify-content center
    align-items center
    > div
        &:nth-child(1)
            flex 1
            padding 30px 0 18px
        &:nth-child(2)
            width 0
            height 120px
            border-left color-border
        &:nth-child(3)
            width 148px
            padding 18px 0
            > img 
                display block
                width 50px
                height 50px
                margin 0 auto 12px
            > p
                margin-bottom 12px
                text-align center
                &:nth-of-type(1)
                    color color2
                    font-size size2
                    line-height size2
                &:nth-of-type(2)
                    font-size size3
                    color color3
            
.product-other-box-t
    display flex
    > div 
        flex 1
        text-align center
        margin-bottom 38px
        > p 
            &:nth-child(1)
                height 20px
                line-height 20px
                color color-red
                font-size 20px
                margin-bottom 14px
            &:nth-child(2)
                height 14px
                line-height 14px
                font-size size5
                color color5
    ~ p
        text-align left
        height size2
        line-height size2
        font-size size2
        color color2
        margin-bottom 18px
        margin-left 20px
        &:last-of-type
            margin-bottom 0

.zq_nav
    display flex
    border-bottom color-border
    > a 
        display block
        width 120px 
        height 40px 
        line-height 40px
        text-align center
        color color2
        font-size size2
        &.active
            color #fff
            background-color color-base

.product-detail .zq_gaikuang
    margin-top 30px
    padding-bottom 22px 
.zq_jinli
    padding-bottom 30px
    > h5 
        padding 30px 0 10px 24px
        font-size size3
        line-height size3
        color color3
    > p 
        padding 0 30px
        line-height 22px
        font-size size3
        color color5
        text-align justify

.zq_yeji
    padding 30px 30px 40px 
    h5
        line-height 40px
        font-size size3
        color color-base

.zq_map
    display flex 
    .zq_map_l
        flex 1
        padding-top 7px
        height 220px
    .zq_map_r
        width 320px

.zq_table
    border color-border
    border-bottom none
    li 
        height 30px
        line-height 30px
        border-bottom color-border
        display flex 
        color color3 
        font-size size3
        &:nth-child(2n+1)
            background-color #f1f1f1
        span
            display block
            flex 1
            text-align center

.zq_table1 li span:last-child,
.zq_table2 li span:nth-child(n+2)
    color color-red
.zq_table1 li:first-child span,
.zq_table2 li:first-child span,
.zq_table2 li:last-child span
    color color3

.zq_product
    display flex 
    padding 22px 22px 0
    margin-bottom -6px
    > div
        flex 1
        p
            height 26px
            font-size size3
            color color3
            line-height 26px
            text-align center
            i
                color color-red
        &:first-child p:first-child
            font-size 30px
            color color-red
            line-height 14px